<template>

    <el-container class="ym-layout">
      <el-aside  :style="layoutStyle.aside"  class="ym-layout__aside" >
        <h1 class="ym-layout__title">服务端</h1>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo  ym-layout__aside-menu"
          :collapse="isCollapse"
          :style="menuHeight.height"
          router
        >

    <el-menu-item index="/server/review-task-scheduling" v-if="userStore.userInfo.roleId === 2">
      <el-icon><document /></el-icon>
      <template #title>评阅任务调度</template>
    </el-menu-item>

    <el-menu-item index="/server/task-manage">
      <el-icon><document /></el-icon>
      <template #title>评阅任务管理</template>
    </el-menu-item>

    <el-menu-item index="/server/recheck-request" v-if="userStore.userInfo.roleId === 3"> 
      <el-icon><document /></el-icon>
      <template #title>查卷申请</template>
    </el-menu-item>

    <el-menu-item index="/server/recheck-request-manage" v-if="userStore.userInfo.roleId === 2">
      <el-icon><document /></el-icon>
      <template #title>查卷申请管理</template>
    </el-menu-item>

    <el-menu-item index="/server/recheck-task" v-if="userStore.userInfo.roleId === 2 || userStore.userInfo.roleId === 3">
      <el-icon><document /></el-icon>
      <template #title>复查任务</template>
    </el-menu-item>

    <el-menu-item index="/server/score-analysis-export" v-if="userStore.userInfo.roleId === 2 || userStore.userInfo.roleId === 3">
      <el-icon><document /></el-icon>
      <template #title>成绩分析与导出</template>
    </el-menu-item>

    <el-menu-item index="/server/backup-data" v-if="userStore.userInfo.roleId === 2">
      <el-icon><document /></el-icon>
      <template #title>备份与还原</template>
    </el-menu-item>



 
        </el-menu>
      </el-aside>

      <el-container :style="layoutStyle.main"  class="ym-layout__main" >

        <el-header class="ym-layout__header">
          <h1 class="ym-layout__title2">服务端</h1>
          <button class="ym-menu-button" @click="drawer = true">
            <i style="font-size: 22px;" class="ym-menu-button__i">
              <svg width="20" height="20" viewBox="0 0 20 20 " fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2" y="7" width="11" height="2" fill="#606266"></rect>
                <rect x="2" y="11" width="14" height="2" fill="#606266"></rect>
                <rect x="2" y="15" width="8" height="2" fill="#606266"></rect>
                <rect x="2" y="3" width="16" height="2" fill="#606266"></rect>
              </svg>
            </i>
            <span class="ym-menu-button__title" >Menu</span>
          </button>

         <el-radio-group v-model="isCollapse" style="margin-bottom: 20px" class="ym-layout__radio">
          <el-radio-button :value="false" @click="handleOpen" v-if="isCollapse">展开菜单</el-radio-button>
          <el-radio-button :value="true"  @click="handleClose"  v-if="!isCollapse">收缩菜单</el-radio-button>
        </el-radio-group>

        <ring-component   
         v-model:notificationResult="notificationResult"
         v-model:isRing="isRing"
         @updateNotification="getNotification"
         style="position: absolute;
         top: 202px;
         left: 90vw;
         z-index: 10;"
         class="ym-layout__notification"
         ></ring-component>


         

        </el-header>

        <el-main class="ym-layout__content">
       

          <router-view />
        </el-main>

      </el-container>

    </el-container>

    <el-drawer 
    v-model="drawer" 
    title="I am the title" 
    :with-header="false" 
    :direction="direction"
    size= 230px
    >
      <el-menu
        :default-active="activeMenu"
        class="drawer-menu"
        router
      >
        
        <el-menu-item index="/server/review-task-scheduling" v-if="userStore.userInfo.roleId === 2">
          <el-icon><document /></el-icon>
          <template #title>评阅任务调度</template>
        </el-menu-item>
        
        <el-menu-item index="/server/task-manage">
          <el-icon><document /></el-icon>
          <template #title>评阅任务管理</template>
        </el-menu-item>

        <el-menu-item index="/server/recheck-request" v-if="userStore.userInfo.roleId === 3"> 
          <el-icon><document /></el-icon>
          <template #title>查卷申请</template>
        </el-menu-item>

        <el-menu-item index="/server/recheck-request-manage" v-if="userStore.userInfo.roleId === 2">
          <el-icon><document /></el-icon>
          <template #title>查卷申请管理</template>
        </el-menu-item>

        <el-menu-item index="/server/recheck-task" v-if="userStore.userInfo.roleId === 2 || userStore.userInfo.roleId === 3">
          <el-icon><document /></el-icon>
          <template #title>复查任务</template>
        </el-menu-item>
        
        <el-menu-item index="/server/score-analysis-export" v-if="userStore.userInfo.roleId === 2 || userStore.userInfo.roleId === 3">
          <el-icon><document /></el-icon>
          <template #title>成绩分析与导出</template>
        </el-menu-item>
        
        
        <el-menu-item index="/server/backup-data" v-if="userStore.userInfo.roleId === 2">
          <el-icon><document /></el-icon>
          <template #title>备份与还原</template>
        </el-menu-item>



    

      </el-menu>
    </el-drawer>

</template>



<script setup lang='ts'>
import { ref, reactive, onMounted, computed, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useServerUserStore } from '@/stores/modules/user-server'
import {getNotificationByUserId } from '@/api/server/notification'
import socketManager from '@/utils/zym-socketIo'

const userStore = useServerUserStore()
const route = useRoute()
const drawer = ref(false)
const direction = ref('ltr')

const activeMenu = computed(() => {
  return route.path
})

const layoutStyle = reactive({
  aside: { flex: '1',transition: 'all .5s ease-in-out'  },
  main: { flex: '6.5',transition: 'all .5s ease-in-out' }
})

const menuHeight = reactive({
  height: {height: '94%'}
})

window.addEventListener('resize', () => {
  console.log('当前页面宽度:', window.innerWidth);
});

const isCollapse = ref(false)
const handleOpen = () => {
  layoutStyle.main.flex = '6.5' ;
  const title =  document.querySelector<HTMLElement>('.ym-layout__title');
  title.style.width = '100%';
  title.style.height = '6%';
  title.innerHTML = '服务端';

   menuHeight.height.height = '94%'
}
const handleClose = () => {
  layoutStyle.main.flex = '20' ;
  const title =  document.querySelector<HTMLElement>('.ym-layout__title');
  title.style.width = '0%';
  title.style.height = '0%';
  title.innerHTML = '';

  menuHeight.height.height = '100%'
}

const isRing = ref(false)
const notificationResult = ref(null)

const getNotification = async () => {
  const res = await getNotificationByUserId({userId: userStore.userInfo.id})
  notificationResult.value = res.data.data
  console.log('notificationResult: ',notificationResult.value)
  if(notificationResult.value?.unreadTotal > 0 ) {
    isRing.value = true
  }else{
    isRing.value = false
  }
}

// 在组件挂载时连接
onMounted(async () => {
  // 连接到服务器
  socketManager.connect();
  getNotification()
});


// 可选：在组件销毁前断开连接
onBeforeUnmount(() => {
  // 如果需要在组件销毁时断开连接，可以取消注释下面这行
 //socketManager.disconnect();
});


// 监听 是否有人发起查卷申请(学科组长)
socketManager.on('recheckRequest', () => {
  getNotification()

});

// 提醒教师，有查卷申请
socketManager.on('requestResult', (data) => {
  getNotification()
  ElMessage.warning(`${data.message}`)

});

// 提醒教师，有复查结果
socketManager.on('recheckResult', (data) => {
  getNotification()
  ElMessage.warning(`${data.message}`)
});


// 提醒教师，有复审任务分配
socketManager.on('recheckAssignment', (data) => {
  getNotification()
  ElMessage.warning(`${data.message}`)
});

// 如果批阅任务为完成，且快到期，提醒批阅人员
socketManager.on('assignmentRemind', (data) => {
  getNotification()
  ElMessage.warning(`${data.message}`)
});

</script>

<style scoped lang="scss">



@include b(layout){
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
 


  @include e(aside){
    flex: 1;
    overflow-y: hidden;
  }
  @include e(title){
    width: 100%;
    height: 6%;
    text-align: center;
    line-height: 2.5vw;
    font-size: 1.5rem;
    transition: all .2s ;
  }
  @include e(title2){
    position: relative;
    width: 100px;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    display: none;
  }

  @include e(main){
  flex: 7;
  display: flex;
  flex-direction: column;
  }

  @include e(header){
    position: relative;
    flex: 1;
  }
  @include e(content){
    flex: 11;
    overflow-y: auto;
  }

  @include e(aside-menu){
    height: 94%;
    width: 100%;
  }

  @include e(radio){
    position: relative;
    left: -20px;
    top: -1px;
  }
}

@include b(menu-button){
  display: none;
}

.drawer-menu {
  border-right: none;
}

@media screen and (max-width: 1400px){
    @include b(layout){
      @include e(aside){
       display: none;
      }

      @include e(radio){
        display: none;
      }

      @include e(title2){
        display: block;
      }
    }

    @include b(menu-button){
      position: relative;
      top: -20px;

      display: block;
      width: 100px;
      height: 40px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-size: 20px;

      @include e(i){
        position: relative;
        top:2px
      }
      @include e(title){
        position: relative;
        top: -24px;
        left: 4px;
      }
    }

}

@media screen and (max-width: 768px) {
  @include b(layout) {
    @include e(content) {
      padding: 10px;
    }
  }
}

</style>